<template>
	<view>
		<a-nabbar :name="option.name" />
		<view>
			<view class="content-video"><video :src="content.playUrl" autoplay loop show-mute-btn></video></view>
			<view class="u-flex-1">
				<me-tab v-model="indexCurrent" class="nihao" :height="88" :tabs="tabs" @change="tabGetChange"
					activeColor="#765CFE" @tabTop="getTabTop"></me-tab>
			</view>
			<view class="content">
				<swiper :indicator-dots="false" :autoplay="false" :style="swiperStyle"  :duration="300" :current="tabIndex" @change="getChange">
					<swiper-item>
						<scroll-view scroll-y style="height: 100%;">
							<view class="info-content">
								<view class="info-content-title">
									<view class="content-content">{{ content.name || ''}}</view>
									<view class="u-icon-wrap u-margin-right-20" @click.stop="headClick">
										<u-icon v-if="arrow" :color="arrowColor"
											:class="{ 'u-arrow-down-icon-active': isShow }" class="u-arrow-down-icon"
											name="arrow-down" size="26"></u-icon>
									</view>
								</view>
								<view class="icon-list">
									<view class="icon-item icon-left">
										<u-icon name="bofangliang" custom-prefix="index-custom-icon" color="#9A9999"
											size="26" />
										<!-- <u-icon name="liulanliang" custom-prefix="index-custom-icon" color="#9A9999" size="26" /> -->
										<text class="browse">{{ content.browse || 0}}</text>
									</view>
									<view class="u-flex icon-item icon-right">
										<!-- 分享 -->
										<view class="share u-position-relative u-margin-right-20">
											<u-icon name="zhuanfa" size="32" custom-prefix="custom-icon"
												:color="currentThemeObj.primary"></u-icon>
											<button open-type="share" class="open-share u-position-absolute"></button>
										</view>
										<!-- 点赞 -->
										<view class="u-flex" @click.stop="unlike">
											<u-icon :name="content.isLike===0?'weidianzan':'dianzan1'" size="32"
												:color="content.isLike===0?'#999999':'#FF8DC3'"
												custom-prefix="custom-icon">
											</u-icon>
											<!-- <u-icon name="weidianzan" size="32"
										color="#999999" custom-prefix="custom-icon"> -->
											<!-- </u-icon> -->
											<text class="u-font-20 u-margin-left-10">{{content.likeNum || 0}}</text>
										</view>
									</view>
								</view>
						
								<view class="u-margin-top-20 u-margin-left-30 content-jianjie" v-if="!isShow">
									<u-parse :html="content.content"></u-parse>
								</view>
							</view>
							<view class="recommended-content">
								<view v-for="(item, index) in content.recommendList" :key="index" class="recommended-list"
									@click="goRecommendedDetail(item)">
									<view class="recommended-item">
										<view class="item-image">
											<item-image :img="item.image" :width="224" :height="160" :radius="20" />
										</view>
										<view class="recommended-info">
											<view class=" u-line-3">{{ item.name}}</view>
											<view>
												<u-icon name="bofangliang" custom-prefix="index-custom-icon" color="#9A9999" size="26" />
												<text class="browse">{{ item.browse }}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item >
						<mescroll-uni  @init="mescrollInit" @down="downCallback" @up="upCallback" :up="up">
							<view class="comments-content">
								<comment @onFocus="onFocus" :commentsList="dataList" @delete="deleteCommentsId($event)"></comment>
							</view>
						</mescroll-uni>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="comment-input">
			<comment-inputs v-if="indexCurrent === 1" :focus="focus" @input="getContent($event)"
				@click="saveComments($event)" :placeholder="comments.content"></comment-inputs>
		</view>
	</view>
</template>

<script>
	import pageMixins from '@/pages/pageMixins.js';
	import swiperListMixin from '@/mixins/swiperList.js';
	import upCallback from "@/mixins/upCallbackMixin.js";
	import {
		getOpenVedioDetail,
		getVideoPlayComments,
		saveComments,
		delCommentvideo,
		videoIsLike
	} from '@/api/advertising.js';
	import meTab from './components/meTab';
	import comment from '../acomponents/comment.vue';
	import commentInputs from '../acomponents/commentInputs.vue';
	import MescrollEmpty from '@/components/mescroll-uni/components/mescroll-empty.vue'; // 引入 空 组件
	import {
		mapGetters
	} from 'vuex'
	export default {
		mixins: [pageMixins, swiperListMixin,upCallback],
		name: '',
		props: {},
		components: {
			meTab,
			commentInputs,
			comment,
			MescrollEmpty
		},
		computed: {
			...mapGetters(['loginForm']),
			uid() {
				return this.loginForm.uid
			}
		},
		data() {
			return {
				focus: false,
				option: {},
				content: {},
				arrow: true,
				isShow: true,
				otherHeight: '460rpx',
				arrowColor: '#9A9999', // 箭头的颜色
				collapseList: [],
				tabs: [{
						name: '简介'
					},
					{
						name: '评论'
					}
				],
				commentsList: [], // 评论列表
				videoPlayId: '', // 视频id
				comments: {
					content: '',
					parentCreater: ''
				},
				form:{
					videoPlayId:'',
				},
				conmentsTotal: 0,
				unSetotherHeight:true,
				apiModule: 'sns',
				apiType: 'videoPlayComment',
				name:'getVideoPlayComments',
				up:{
					use:true,
					toTop:{
						src:''
					}
				}
			};
		},
		onLoad(option) {
			this.option = option;
			this.form.videoPlayId=option.id;
			this.getOpenVedioDetail();
		},
		methods: {
			// 删除评论
			async deleteCommentsId(data) {
				await delCommentvideo(data);

				this.dataList = this.dataList.filter(res=> res.id !== data.id);
				this.conmentsTotal = this.conmentsTotal -1
        this.tabs[1].name = `评论 ${this.conmentsTotal}`
			
        if(this.dataList.length <=0) {
          this.downCallback();
				  this.mescroll.scrollTo(0,0)
        }
			},
			onFocus(e) {
				this.focus = e.focus,
				this.comments.parentCreater = e.creater
				this.comments.content = e.createName
			},
			// 获取组件评论
			getContent(e) {
				this.comments.content = e;
			},
			// 发送评论
			async saveComments(e) {
				console.log(this.comments, '有了吧');
				if (this.comments.parentCreater) {
					await saveComments({
						videoPlayId: this.option.id,
						content: e,
						parentCreater: this.comments.parentCreater
					});
				} else {
					await saveComments({
						videoPlayId: this.option.id,
						content: e
					});
				}
				this.comments = {};
				console.log(this.comments, '没有了吧');
				this.downCallback();
				this.mescroll.scrollTo(0,0)
				// this.getVideoPlayComments();
			},
          //获取数据
      dataListCallBack(res){
        console.log(res,'dataListCallBack在哪里获取的呀')
        this.conmentsTotal = res.totalElements;
        this.tabs[1].name = `评论 ${this.conmentsTotal}`; // 评论数量
      },
			// 获取评论
			async getVideoPlayComments() {
				// let res = await getVideoPlayComments({
				// 	videoPlayId: this.option.id
				// });
				// console.log(res, '查询视频pingl');
				// this.commentsList = res.content;
				// console.log(res.totalElements, 'res.totalElements');
				this.conmentsTotal = this.dataList.totalElements;
				this.tabs[1].name = `评论 ${this.conmentsTotal}`; // 评论数量
			},
			async getOpenVedioDetail() {
				try {
					let res = await getOpenVedioDetail({
						id: this.option.id,
						uid: this.uid
					});
					this.content = res;
					this.content.content = '简介：' + this.content.content;
					console.log(this.content.content, 'this.content.content');
					if (this.content.playUrl === null) {
						this.$u.toast('视频获取失败,请稍后再试');
					}
				} catch (error) {}
			},
			// 点击推荐列表跳转详情
			goRecommendedDetail(item) {
				this.$u.route({
					type: 'redirectTo',
					url: '/pagesA/openScript/openScriptDetail',
					params: {
						id: item.id,
						name: item.name
					}
				});
			},
			headClick() {
				if (this.disabled) return;
				if (this.parent && this.parent.accordion == true) {
					this.parent.childrens.map(val => {
						// 自身不设置为false，因为后面有this.isShow = !this.isShow;处理了
						if (this != val) {
							val.isShow = false;
						}
					});
				}

				this.isShow = !this.isShow;
				// 只有在打开时才发出事件
				if (this.isShow) this.parent && this.parent.onChange();
				this.$forceUpdate();
			},
			// 点赞功能
			async unlike() {
				console.log(this.uid);
				if(!this.uid){
					this.$u.toast('您还没有登录')
					return false;
				}
				let data = {
					uid: this.uid,
					videoPlayId: this.option.id,
					type: 'like'
				}
				let res = await videoIsLike(data)
				this.getOpenVedioDetail()
				console.log(res, '点赞');
			},
			// getChange(e) {
			//   const index = e.detail ? e.detail.current : e;
			//   if (e.hasOwnProperty("detail") && e.detail.source == "touch") {
			//     this.indexCurrent = index; //切换选项卡样式
			//     console.log(this.indexCurrent, e, "哪里的东西");
			//   }
			//   this.otherHeight = this.isFilterFlag ? "318rpx" : "128rpx";
			// },
			// tabGetChange(index) {
			//   this.tabIndex = index; //切换swiper
			// },
		}
	};
</script>

<style lang="scss" scoped>
	.content-video {
		width: 100vw;

		video {
			width: 100%;
		}
	}

	.info {
		height: 78rpx;
		border-bottom: 1rpx #f0f1f5 solid;
		padding: 18rpx 0 20rpx 110rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.collapse {
		position: relative;
		top: -44rpx;
	}

	.info-content {
		border-bottom: 1rpx #f0f1f5 solid;
		padding-bottom: 30rpx;
	}

	.info-content-title {
		// border-top: 1rpx #f0f1f5 solid;
		display: flex;
		justify-content: space-between;
	}

	.content-content {
		padding: 20rpx 30rpx;
		font-size: 30rpx;
		color: #1a1a1a;
	}

	.icon-list {
		display: flex;
		justify-content: space-between;

		.icon-item {
			padding: 0 30rpx;
		}
	}

	.browse {
		margin-left: 6rpx;
		color: #9a9999;
		font-size: 20rpx;
	}

	.u-arrow-down-icon-active {
		transform: rotate(180deg);
		transform-origin: center center;
	}

	.content-jianjie {
		color: #9a9999;
		font-size: 20rpx;
	}

	.recommended-info {
		color: #1a1a1a;
		font-size: 30rpx;
	}

	.recommended-item {
		padding: 20rpx;
		border-bottom: 1rpx #f0f1f5 solid;
		display: flex;

		.item-image {
			margin-right: 20rpx;
		}
	}

	.comments-content {
		padding-bottom: 200rpx;
		// border-bottom: 1rpx #f0f1f5 solid;
	}

	.share {
		.open-share {
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
		}
	}
</style>
